<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <script src="../avalon.js" ></script>
        <script>
            new function() {
                if (!Date.now) {//fix 旧式IE
                    Date.now = function() {
                        return new Date - 0;
                    }
                }
                var model = avalon.define({
                    $id: "repeatgrid",
                    selected: "name",
                    options: ["name", "size", "date"],
                    trend: 1,
                    data: [
                        {name: "aaa", size: 213, date: Date.now() + 20},
                        {name: "bbb", size: 4576, date: Date.now() - 4},
                        {name: "ccc", size: 563, date: Date.now() - 7},
                        {name: "eee", size: 3713, date: Date.now() + 9},
                        {name: "555", size: 389, date: Date.now() - 20}
                    ]
                })
                model.$watch("selected", function(v) {
                    var t = parseFloat(model.trend)
                    model.data.sort(function(a, b) {
                        if (v === "name") {
                            return t * a[v].toLocaleString(b[v])
                        } else {
                            var ret = a[v] > b[v] ? 1 : -1
                            return t * ret
                        }
                    })
                })
                model.$watch("trend", function(t) {
                    var v = model.selected, t = parseFloat(t)
                    model.data.sort(function(a, b) {
                        var ret = a[v] > b[v] ? 1 : -1
                        return t * ret
                    })
                })
            }
        </script>
    </head>
    <body ms-controller="repeatgrid">
        <p>
            <select ms-duplex="selected">
                <option  ms-repeat="options">{{el}}</option>
            </select>
            <select ms-duplex="trend">
                <option value="1">up</option>
                <option value="-1">down</option>
            </select>
        </p>
        <table width="500px" border="1">
            <tbody >
                <tr ms-repeat="data">
                    <td>{{el.name}}</td> <td>{{el.size}}</td> <td>{{el.date}}</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
<script>
    new function() {
        if (!Date.now) {//fix 旧式IE
            Date.now = function() {
                return new Date - 0;
            }
        }
        var model = avalon.define({
            $id: "repeatgrid",
            selected: "name",
            options: ["name", "size", "date"],
            trend: 1,
            data: [
                {name: "aaa", size: 213, date: Date.now() + 20},
                {name: "bbb", size: 4576, date: Date.now() - 4},
                {name: "ccc", size: 563, date: Date.now() - 7},
                {name: "eee", size: 3713, date: Date.now() + 9},
                {name: "555", size: 389, date: Date.now() - 20}
            ]
        })
        model.$watch("selected", function(v) {
            var t = parseFloat(model.trend)
            model.data.sort(function(a, b) {
                if (v === "name") {
                    return t * a[v].toLocaleString(b[v])
                } else {
                    var ret = a[v] > b[v] ? 1 : -1
                    return t * ret
                }
            })
        })
        model.$watch("trend", function(t) {
            var v = model.selected, t = parseFloat(t)
            model.data.sort(function(a, b) {
                var ret = a[v] > b[v] ? 1 : -1
                return t * ret
            })
        })
    }
</script>
<div ms-controller="repeatgrid">
    <p>
        <select ms-duplex="selected">
            <option  ms-repeat="options">{{el}}</option>
        </select>
        <select ms-duplex="trend">
            <option value="1">up</option>
            <option value="-1">down</option>
        </select>
    </p>
    <table width="500px" border="1">
        <tbody >
            <tr ms-repeat="data">
                <td>{{el.name}}</td> <td>{{el.size}}</td> <td>{{el.date}}</td>
            </tr>
        </tbody>
    </table>
</div>